<template>
  <div>
    <h2 class="public-title">安全设置</h2>
    <div class="security-setting">
        <ul>
            <li class="clearfix">
                <p class="fl front">登录密码 <span class="icon icon-suo"></span></p>
                <p class="txt fl">登录账号需要用的密码</p>
                <p class="tool fr activeStyle" @click="resetLoginPsd">重置</p>
            </li>
            <li class="clearfix" v-show="accountData.is_set_paypassword">
                <p class="fl front">支付密码 <span class="icon icon-suo"></span></p>
                <p class="txt fl">在账号资金变动时需要输入的密码</p>
                <p class="tool fr activeStyle" @click="resetPayPsdFn">重置</p>
            </li>
              <li class="clearfix" v-show="!accountData.is_set_paypassword">
                <p class="fl front">支付密码 <span class="icon icon-suo"></span></p>
                <p class="txt fl">在账号资金变动时需要输入的密码</p>
                <p class="tool fr activeStyle" @click="setPayPassword">设置</p>
            </li>
        </ul>
    </div>
    <!-- 登录密码重置 -->
    <Modal title="登录密码重置" v-model="resetPsdShow" :mask-closable="false" width="400" class-name="">
       <Form ref="resetpsd" :model="resetPsd" :rules="resetrule" :label-width="80" label-position="left">
       <FormItem label="旧密码" prop="oldPsd">
            <Input type="password" placeholder="请输入6-15位且必须包含英文和数字的密码" v-model="resetPsd.oldPsd" ref="oldPsdWrong"></Input>
        </FormItem>
        <FormItem label="新密码" prop="newPsd">
            <Input type="password" placeholder="请输入6-15位且必须包含英文和数字的密码" v-model="resetPsd.newPsd"></Input>
        </FormItem>
        <FormItem label="确认密码" prop="confirmNewPsd">
            <Input type="password" placeholder="请输入确认密码" v-model="resetPsd.confirmNewPsd"></Input>
        </FormItem>
        <!-- <FormItem align="center">
            <Button type="error" @click="resetLoginPsdOK('resetpsd')">确定</Button>
            <Button @click="resetLoginCancle('resetpsd')">取消</Button>
        </FormItem> -->
        </Form>
         <div slot="footer" align="center">
            <Button type="error" @click="resetLoginPsdOK('resetpsd')">确定</Button>
            <Button @click="resetLoginCancle('resetpsd')">取消</Button>
        </div>
    </Modal>
    <!-- 支付密码重置 -->
     <Modal title="支付密码重置" v-model="resetPayPsdShow" :mask-closable="false" width="400" class-name="">
       <Form ref="resetpaypsd" :model="resetPayPsd" :rules="resetpaypsdrule" :label-width="80" label-position="left">
       <FormItem label="旧密码" prop="oldPayPsd">
            <Input type="password" placeholder="6位数字旧密码" v-model="resetPayPsd.oldPayPsd" ref="oldPayPsdWrong"></Input>
        </FormItem>
        <FormItem label="新密码" prop="newPayPsd">
            <Input type="password" placeholder="6位数字新密码" v-model="resetPayPsd.newPayPsd"></Input>
        </FormItem>
        <FormItem label="确认密码" prop="confirmNewPayPsd">
            <Input type="password" placeholder="请输入确认密码" v-model="resetPayPsd.confirmNewPayPsd"></Input>
        </FormItem>
        </Form>
         <div slot="footer" align="center">
            <Button type="error" @click="changePayPsdOk('resetpaypsd')">确定</Button>
            <Button @click="changePayPsdCancle('resetpaypsd')">取消</Button>
        </div>
    </Modal>
    <!-- 支付密码设置 -->
    <Modal title="支付密码设置" v-model="setPayPsdShow" :mask-closable="false" width="400" class-name="">
       <Form ref="setpaypsd" :model="setPayPsd" :rules="setpaypsdrule" :label-width="80" label-position="left">
        <FormItem label="密码" prop="setFirstPayPsd">
            <Input type="password" placeholder="6位数字密码" v-model="setPayPsd.setFirstPayPsd"></Input>
        </FormItem>
        <FormItem label="确认密码" prop="confirmSetFirstPayPsd">
            <Input type="password" placeholder="请输入确认密码" v-model="setPayPsd.confirmSetFirstPayPsd"></Input>
        </FormItem>
        </Form>
         <div slot="footer" align="center">
            <Button type="error" @click="setPayPsdOK('setpaypsd')">确定</Button>
            <Button @click="setPayPsdCancle('setpaypsd')">取消</Button>
        </div>
    </Modal>
  </div>
</template>
<style scoped>

</style>
<script>
import { jsonToString } from "@/common/js/jsonToString";
import { mapGetters, mapActions } from "vuex";
export default {
  data() {
    //验证旧密码
    const loginOldPsd = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("旧密码不能为空"));
      } 
      // else if (!/^(?![^a-zA-Z]+$)(?!\D+$).{6,15}$/.test(value)) {
      //   callback(new Error("请输入6-15位且必须包含英文和数字的密码"));
      // }
       else if (value == this.wrongOldPsd) {
        callback(new Error("旧密码不正确"));
      } else {
        callback();
      }
    };
    //验证登录新密码
    const validateNewPsd = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("新密码不能为空"));
      } else if (!/^(?![^a-zA-Z]+$)(?!\D+$).{6,15}$/.test(value)) {
        callback(new Error("请输入6-15位且必须包含英文和数字的密码"));
      } else {
        if (this.resetPsd.confirmNewPsd !== "") {
          this.$refs.resetpsd.validateField("confirmNewPsd");
        }
        callback();
      }
    };
    //确认登录密码
    const validateConfirmPsd = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入确认密码"));
      } else if (value !== this.resetPsd.newPsd) {
        callback(new Error("两次密码输入不一致"));
      } else {
        callback();
      }
    };
    //-------------
    //支付密码修改验证
    const checkNewPayPsd = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("新密码不能为空"));
      } else if (!/^[0-9]{6}$/.test(value)) {
        callback(new Error("支付密码必须为六位数字"));
      } else {
        if (this.resetPayPsd.confirmNewPayPsd !== this.resetPayPsd.newPayPsd) {
          this.$refs.resetpaypsd.validateField("confirmNewPayPsd");
        }
        callback();
      }
    };
    const confirmNewPayPsd = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入确认密码"));
      } else if (value !== this.resetPayPsd.newPayPsd) {
        callback(new Error("两次密码输入不一致"));
      } else {
        callback();
      }
    };
    //旧的支付密码
    const checkOldPayPsd = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("旧密码不能为空"));
      } else if (!/^[0-9]{6}$/.test(value)) {
        callback(new Error("支付密码必须为六位数字"));
      } else if (value == this.wrongOldPayPsd) {
        callback(new Error("旧密码不正确"));
      } else {
        if (value == this.wrongOldPayPsd) {
          callback(new Error("旧的支付密码错误！"));
        }
        callback();
      }
    };
    //验证设置密码
    const checkSetPayPsd = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("密码不能为空"));
      } else if (!/^[0-9]{6}$/.test(value)) {
        callback(new Error("支付密码必须为六位数字"));
      } else {
        if (
          this.setPayPsd.confirmSetFirstPayPsd !== this.setPayPsd.setFirstPayPsd
        ) {
          this.$refs.setpaypsd.validateField("confirmSetFirstPayPsd");
        }
        callback();
      }
    };
    const confirmSetPayPsd = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入确认密码"));
      } else if (value !== this.setPayPsd.setFirstPayPsd) {
        callback(new Error("两次密码输入不一致"));
      } else {
        callback();
      }
    };
    //-------------
    return {
      // accountUserData: {},
      //修改密码框
      wrongOldPsd: "",
      resetPsdShow: false,
      resetPsd: {
        oldPsd: "",
        newPsd: "",
        confirmNewPsd: ""
      },
      resetrule: {
        oldPsd: [{ validator: loginOldPsd, trigger: "blur" }],
        newPsd: [{ validator: validateNewPsd, trigger: "blur" }],
        confirmNewPsd: [{ validator: validateConfirmPsd, trigger: "blur" }]
      },
      //修改支付密码框
      resetPayPsd: {
        oldPayPsd: "",
        newPayPsd: "",
        confirmNewPayPsd: ""
      },
      wrongOldPayPsd: "",
      resetPayPsdShow: false,
      resetpaypsdrule: {
        oldPayPsd: [{ validator: checkOldPayPsd, trigger: "blur" }],
        newPayPsd: [{ validator: checkNewPayPsd, trigger: "blur" }],
        confirmNewPayPsd: [{ validator: confirmNewPayPsd, trigger: "blur" }]
      },
      //设置支付密码
      setPayPsdShow: false,
      setPayPsd: {
        setFirstPayPsd: "",
        confirmSetFirstPayPsd: ""
      },
      setpaypsdrule: {
        setFirstPayPsd: [{ validator: checkSetPayPsd, trigger: "blur" }],
        confirmSetFirstPayPsd: [
          { validator: confirmSetPayPsd, trigger: "blur" }
        ]
      }
    };
  },
  created() {

    // this.accountUserData = this.accountData;
    // JSON.parse(JSON.stringify());
  },
  computed: {
    ...mapGetters(["accountData"])
  },
  // watch: {
  //   accountUserData(Boolean) {
  //     if (Boolean) {
  //       this.SET_ACCOUNT_DATA({
  //         obj: this.accountUserData
  //       });
  //     }
  //   }
  // },
  methods: {
    ...mapActions(["SET_ACCOUNT_DATA"]),
    resetLoginPsd: function() {
      this.resetPsdShow = true;
    },
    resetPayPsdFn: function() {
      this.resetPayPsdShow = true;
    },
    setPayPassword: function() {
      this.setPayPsdShow = true;
    },
    //确定修改登录密码
    resetLoginPsdOK(resetpsd) {
      var that = this;
      this.$refs[resetpsd].validate(valid => {
        if (valid) {
          var params = {
            token: localStorage.getItem("token"),
            old_psd: this.resetPsd.oldPsd,
            new_psd: this.resetPsd.newPsd,
            new_psd2: this.resetPsd.confirmNewPsd
          };
          this.$http
            .post(
              this.urlRequest + "?m=api&c=user&a=updLoginPsd",
              jsonToString(params)
            )
            .then(res => {
              console.log(res.data);
              console.log(res.data.status);
              if (res.data.status == 0) {
                that.resetPsdShow = false;
                console.log(that.resetPsdShow);
                that.$Message.success("登录密码修改成功");
              }
              if (res.data.status == 1714) {
                this.wrongOldPsd = this.resetPsd.oldPsd;
                this.$refs.oldPsdWrong.focus();
                this.$Message.error(res.data.ret_msg);
                setTimeout(() => {
                  this.$refs.oldPsdWrong.blur();
                }, 20);
              }
            });
        }
      });
    },
    //取消修改登录密码
    resetLoginCancle(resetPsd) {
      this.$refs[resetPsd].resetFields();
      this.resetPsdShow = false;
    },
    //设置密码ok
    setPayPsdOK(setpaypsd) {
      this.$refs[setpaypsd].validate(valid => {
        if (valid) {
          var params = {
            token: localStorage.getItem("token"),
            psd: this.setPayPsd.setFirstPayPsd,
            psd2: this.setPayPsd.confirmSetFirstPayPsd
          };
          this.$http
            .post(
              this.urlRequest + "?m=api&c=user&a=setPayPSD",
              jsonToString(params)
            )
            .then(res => {
              if (res.data.status == 0) {
                this.$Message.success("设置支付密码成功！");
                this.accountData.is_set_paypassword = "1";
                this.setPayPsdShow = false;
              } else {
                this.$Message.error(res.data.ret_msg);
              }
            });
        }
      });
    },
    setPayPsdCancle(setpaypsd) {
      this.$refs[setpaypsd].resetFields();
      this.setPayPsdShow = false;
    },
    //修改支付密码
    changePayPsdOk(resetpaypsd) {
      this.$refs[resetpaypsd].validate(valid => {
        if (valid) {
          var params = {
            token: localStorage.getItem("token"),
            old_psd: this.resetPayPsd.oldPayPsd,
            new_psd: this.resetPayPsd.newPayPsd,
            new_psd2: this.resetPayPsd.confirmNewPayPsd
          };
          this.$http
            .post(
              this.urlRequest + "?m=api&c=user&a=updPayPsd",
              jsonToString(params)
            )
            .then(res => {
              console.log(res);
              if (res.data.status == 0) {
                this.resetPayPsdShow = false;
                this.$Message.success("修改支付密码成功！");
              }
              if (res.data.status == 1202) {
                this.$Message.error("res.data.ret_msg");
              }
              if (res.data.status == 1714) {
                this.wrongOldPayPsd = this.resetPayPsd.oldPayPsd;
                this.$refs.oldPayPsdWrong.focus();
                this.$Message.error(res.data.ret_msg);
                setTimeout(() => {
                  this.$refs.oldPayPsdWrong.blur();
                }, 20);
              }
            });
        }
      });
    },
    //取消修改支付密码
    changePayPsdCancle(resetpaypsd) {
      this.$refs[resetpaypsd].resetFields();
      this.resetPayPsdShow = false;
    }
  }
};
</script>





// WEBPACK FOOTER //
// src/components/PersonalCenter/securitySetting/securitySetting.vue